<template>
	<div style="background: #FFFFFF;">
		<div style="width: 150px; height: 100%; background: red; float: left;">
			<Menu active-name="1" style="width: 150px;height:89vh">
				<div style="width: 300px;height: 300px;margin-left: 100%;position: absolute;" v-show="details" @mouseover="MoveIn"
				 @mouseleave="MoveOut">
					<Card title="个人信息" icon="ios-options" :padding="0" shadow style="width: 300px;background-color:#ECF5FF;">
						<CellGroup style="">
							<h4 style="text-align: center;font-family: '新宋体';">用户名：{{this.UserInfo.baidu_name}}</h4>
							<h4 style="text-align: center;font-family: '新宋体';">网盘总容量：{{this.Baidu_total}}</h4>
							<h4 style="text-align: center;font-family: '新宋体';">网盘已用容量：{{this.Baidu_used}}</h4>
							<h4 style="text-align: center;font-family: '新宋体';">是否会员：非会员</h4>

							<Cell title="个人中心" @click.native="aaaa">
								<Icon type="ios-contact" style="margin-right: 10px;" />个人中心
							</Cell>
							<Cell title="切换账号" @click.native="switch1">
								<Icon type="md-repeat" style="margin-right: 10px;" />切换账号
							</Cell>
							<Cell title="退出账号">
								<Icon type="md-log-in" style="margin-right: 10px;" />退出账号
							</Cell>
						</CellGroup>
					</Card>
				</div>
				<div style="100%;height: 100px;" @mouseover="MoveIn" @mouseleave="MoveOut">
					<img :src="this.UserInfo.avatar_url" width="80px" height="80px" style="margin-top: 12px;text-align: center;margin-left: 22%; border-radius:50%; " />
				</div>
				<h2 style="text-align: center;" @mouseover="MoveIn" @mouseleave="MoveOut">{{this.UserInfo.baidu_name}}</h2>
				<MenuGroup title="文件类型">
					<MenuItem name="1" to="/Files">
					<Icon type="ios-folder" />全部类型
					</MenuItem>
					<MenuItem name="2" to="/Img">
					<Icon type="md-images" />图片
					</MenuItem>
					<MenuItem name="3" to="/Video">
					<Icon type="logo-youtube" />视频
					</MenuItem>
					<MenuItem name="4" to="/Music">
					<Icon type="ios-mic" />音乐
					</MenuItem>
					<MenuItem name="5" to="/Doc">
					<Icon type="md-document" />文档
					</MenuItem>
					<MenuItem name="6" to="/Seed">
					<Icon type="md-flower" />种子
					</MenuItem>
					<MenuItem name="7" to="/Other">
					<Icon type="md-reorder" />其他
					</MenuItem>
				</MenuGroup>
				<MenuGroup title="数据传输">
					<MenuItem name="8" to="/Baidu_Upload">
					<Icon type="ios-cloud-upload" />自动备份
					</MenuItem>
					<MenuItem name="9" to="/Baidu_Downloading">
					<Icon type="md-cloud-download" />下载管理
					</MenuItem>
				</MenuGroup>
			</Menu>
		</div>
		<div style="background: #FFFFFF;overflow:auto;height: 89vh">
			<router-view></router-view>
		</div>
	</div>
</template>
<script>
	import axios from 'axios';
	export default {
		data() {
			return {
				num: [],
				UserInfo: [],
				details: false,
				Baidu_total: '123123',
				Baidu_used: '',
			};
		},
		mounted() {
			var access_token = window.sessionStorage.getItem("access_token");
			axios({
				url: 'https://pan.baidu.com/rest/2.0/xpan/nas?method=uinfo&access_token=' + access_token,
				method: 'get',
			}).then((res) => {
				console.log(res)
				this.UserInfo = res.data
				window.sessionStorage.setItem('Baidu_name', res.data.baidu_name)
			})
			// 获取总容量
			var total = ''
			var Baidu_total = window.sessionStorage.getItem('Baidu_total')
			if (Baidu_total < 1024) {
				total = Baidu_total + "B";
			} else if (Baidu_total < 1048576) {
				total = (Baidu_total / 1024).toFixed(1) + "K";
			} else if (Baidu_total < 1073741824) {
				total = (Baidu_total / 1048576).toFixed(1) + "M";
			} else {
				total = (Baidu_total / 1073741824).toFixed(1) + "G";
			}
			this.Baidu_total = total
			// 获取已用容量
			var used = ''
			var Baidu_used = window.sessionStorage.getItem('Baidu_used')
			if (Baidu_used < 1024) {
				used = Baidu_used + "B";
			} else if (Baidu_used < 1048576) {
				used = (Baidu_used / 1024).toFixed(1) + "K";
			} else if (Baidu_used < 1073741824) {
				used = (Baidu_used / 1048576).toFixed(1) + "M";
			} else {
				used = (Baidu_used / 1073741824).toFixed(1) + "G";
			}
			this.Baidu_used = used

		},
		methods: {
			// 鼠标经过头像
			MoveIn() {
				this.details = true
			},
			// 鼠标移出头像
			MoveOut() {
				this.details = false
			},
			sadfasdf(file) {
				console.log(file);
				this.num = file
			},
			aaaa() {
				alert('123')
			},
			switch1(){
				
			}
		}
	};
</script>
